<HTML>
	<HEAD>
	<TITLE></TITLE>
	<link rel="stylesheet" type="text/css" href="css/persist.css"/>
	</HEAD>

<BODY>

<script type="text/javascript" src="../js/Util.js"></script>
<script type="text/javascript" src="../js/3rd_party/persist-js-0.1.0/persist.js"></script>
<script type="text/javascript" src="../js/3rd_party/json2/json2-min.js"></script>
<script type="text/javascript" src="../js/PersistForm.js"></script>

<form id="address">
	<div>first name      : <input id="first_name" class="durable" /></div>
	<div>last name       : <input id="last_name"  class="durable" /></div>
	<div>street address  : <input id="street"     class="durable" /></div>
	<div>street address2 : <input id="street2"    class="durable" /></div>
	<div>city            : <input id="city"       class="durable" /></div>
	<div>state           : <input id="state"      class="durable" /></div>
	<div>zip             : <input id="zip"        class="durable" /></div>
	<input type="submit" value="store" onclick="peristForm()"/>
</form>

<script type="text/javascript">

var store;
var form;

var init = function() {
	Util.valu( 'konsole', '' );

	/* create the storage */
	store = new Persist.Store( 'persist form demo' );
	konsole( 'MaxSize: ' + ( ( Persist.size < 0 ) ? 'unknown' : Persist.size ) );
	konsole( 'Backend: ' + Persist.type || 'none' );

	form = new PersistForm( store, 'address' );
};

/* persist the user's data */
var peristForm = function() {
	konsole( 'persisting form' );
	form.save();
	konsole( 'persisted form' );
};

var konsole = function( message ) {
	Util.valu( 'konsole', message + '\n' + Util.valu( 'konsole' ) );
};

Util.addOnLoadCallback( init );

</script>

<textarea style="float:right" id="konsole" cols="60" rows="12"></textarea>

</BODY>
</HTML>
